import React, { useState } from 'react'
import { Pagination } from 'antd'
const MyPagination = function() {
  function onShowSizeChange(current, pageSize) {
    console.log('current:%d', current)
    console.log('pageSize:%d', pageSize)
  }
  function onChange(pageNumber) {
    console.log('pageNumber:', pageNumber)
    setCurrent(pageNumber)
  }
  const [current, setCurrent] = useState(1)
  return (
    <>
      <div className="box">
        <div className="box-header">base</div>
        <div className="box-body">
          <div className="box-content">
            <Pagination showSizeChanger showQuickJumper onChange={onChange} onShowSizeChange={onShowSizeChange} total={500} defaultCurrent={1}></Pagination>
          </div>
        </div>
      </div>
      <div className="box">
        <div className="box-header">受控组件</div>
        <div className="box-body">
          <div className="box-content">
            <Pagination showSizeChanger showQuickJumper onChange={onChange} onShowSizeChange={onShowSizeChange} total={500} defaultCurrent={current}></Pagination>
          </div>
        </div>
      </div>
    </>
  )
}
export default MyPagination